<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>活动排行</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
		<script src="{$staticHost}/static/js/mod.js"></script>
		<!-- <script src="{$staticHost}/static/js/iscroll.js"></script> -->
		
	</head>
	<style type="text/css">
		.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
	}
	.dropload-down{
	    height: 50px;
	}
	.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
	    height: 50px;
	    line-height: 50px;
	    text-align: center;
	}
	.dropload-load .loading{
	    display: inline-block;
	    height: 15px; 
	    width: 15px;
	    border-radius: 100%;
	    margin: 6px;
	    border: 2px solid #666;
	    border-bottom-color: transparent;
	    vertical-align: middle;
	    -webkit-animation: rotate 0.75s linear infinite;
	    animation: rotate 0.75s linear infinite;
	}
	@-webkit-keyframes rotate {
	    0% {
	        -webkit-transform: rotate(0deg);
	    }
	    50% {
	        -webkit-transform: rotate(180deg);
	    }
	    100% {
	        -webkit-transform: rotate(360deg);
	    }
	}
	@keyframes rotate {
	    0% {
	        transform: rotate(0deg);
	    }
	    50% {
	        transform: rotate(180deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}
	.zs { position: fixed; background: #fff; z-index: 20; width: 100%;top: 0 }
	#con-box { top: 37px }
	#jz {padding-top: 105px}
	</style>
	<body>
		<section class="official rank-cut">
			<h6 class="zs">
				<a href="{$staticHost}/show/rank?aid={$aid}&gid={$gid}&type=1">群组</a>
				<a class="line" href="javascript:void(0)">群成员</a>
			</h6>
			<div id="con-box" class="zs"></div>
			
			<div id="jz" class="rank-cut">
				<ul id="waplist" class="list-01">
				</ul>
			</div>
		</section>
		<!-- 区域划分 -->
		<script id="curUser-tp" type="text/html">
			
			<%if(curUser.uid!= undefined){%>
			<%if(type==3){%>
			<div class="rank-mileage ">
				<ul id="curUser" class="list-01">
					<li>
						<span>
							<% if (curUser.header.length>0){%>
							<img src="<%=curUser.header%>" />
							<%}%>
							<% if (curUser.header.length==0){%>
								<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
							<%}%>
							<i class="ico-crown-2"></i>
						</span>
						<span style="color:#3BB7D9;"><%=curUser.nickname%></span>
						
						<span><b><%=curUser.mileage %>km</b></span>
						<em class="sole"><%=curUser.rank%></em>
					</li>
				</ul>
			</div>
			<%}%>
			<%if(type==4){%>
			<ul id="curUser" class="list-01">
				<li>
					<span>
						<% if (curUser.header.length>0){%>
						<img src="<%=curUser.header%>" />
						<%}%>
						<% if (curUser.header.length==0){%>
							<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">
						<%}%>
					</span>
					<span style="color:#3BB7D9;"><%=curUser.nickname%></span>
					<span><b><%=curUser.mileage %>km</b></span>
					<em class="sole"><%=curUser.rank%></em>
				</li>
			</ul>
			
			<%}%>
			<%}%>
		</script>
		<!-- 当前用户模板 目标 -->
		<script id="curUserList" type="text/html">
		
			<%if(type==3){%>
			<%for(var i=0;i< members.length; i++) {%>
			<li>
				<span>
					<% if (members[i].header.length>0){%>
					<img src="<%= members[i].header%>" />
					<%}%>
					<% if (members[i].header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
					<%}%>
					<% if (members[i].rank==1){%>
					<i class="ico-crown-2"></i>
					<%}%>
					<% if (members[i].rank==2){%>
					<i class="ico-crowny-2"></i>
					<%}%>
					<% if (members[i].rank==3){%>
					<i class="ico-crownt-2"></i>
					<%}%>
				</span>
				<span><%=members[i].nickname%></span>
				<span><b><%=members[i].mileage%>km</b></span>
				<em><%=members[i].rank%></em>
			</li>
			<%}%>
				
			
			<%}%>

			<%if(type==4){%>
			<%for(var i=0;i< members.length; i++) {%>
			<li>
				<span>
					<% if (members[i].header.length>0){%>
					<img src="<%= members[i].header%>" />
					<%}%>
					<% if (members[i].header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
					<%}%>
					
				</span>
				<span><%=members[i].nickname%></span>
				<span><b><%=members[i].mileage%>km</b></span>
			</li>
			<%}%>
			<%}%>
		
	</script>
		<!-- 参赛成员列表模板 -->
	</body>
	<script>
		var gid = "{$gid}";
		var aid = "{$aid}";
		var id =0;
		var time = new Date(new Date().getTime());
		time = (time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes());

		var downTime = new Date(new Date().getTime());
		downTime = (downTime.getFullYear()+"-"+(downTime.getMonth()+1)+"-"+downTime.getDate()+" "+downTime.getHours()+":"+downTime.getMinutes());
		$(function(){
			Load()
			$.getJSON('{$staticHost}/groupWeb/statist',{aid:aid,gid:gid,id:0 }, function(data, error) {
				console.log(data);
				if(data.type==3){
					$("#jz").addClass("rank-mileage")
				}
				if(data.curUser.uid != undefined){
					$("#jz").css("padding-top","105px")
				}else{
					$("#jz").css("padding-top","45px")
				}
				var html = template('curUser-tp', data);
				document.getElementById('con-box').innerHTML = html;
				// soleAll();//当前用户样式

				if(data.curUser.uid != undefined){
					var wapHeight =window.screen.availHeight-233 + 'px';
					var wap =document.getElementById("wap").style.height=wapHeight;
				}else{
					var wapHeight =window.screen.availHeight-167 + 'px';
					var wap =document.getElementById("wap").style.height=wapHeight;
				}

				var lis = $("#wrapper li")
				console.log(lis.length);

				// id += lis.length-1;console.log(id)

			
				refresher.init({
					id:"wrapper",
					pullDownAction: Refresh,
					pullUpAction: Load,
					userClient: browser.versions.android ? 'android' : 'ios'
				});
				
				Load()
				/***加载数据***/

			});
		});

		var counter = 0;
	    var num = 0;
	    var pageStart = 0,pageEnd = 0;
		var generatedCount = 0;
		var lis = $("#group li")
		function Load(){
			$('#jz').dropload({
			    scrollArea : window,
			    loadDownFn : function(me){
			    	$.ajax({
			            type: 'GET',
						url: '{$staticHost}/groupWeb/statist',
						dataType: 'json',
						data:{aid:aid,gid:gid,id:id},
			            success: function(data){
			            	console.log(data);
			                var result = '';
			                counter++;
			                pageEnd = num * counter;
			                pageStart = pageEnd - num;
			                if(typeof data.members == 'undefined') {
								$(".pullUpLabel").html("已加载完毕");
								return;
							}
							if(data.members.length>0) {
								// id += data.members.length-1;
								id = data.members[data.members.length-1].uid;
								
								var html = template('curUserList', data);
								$('#waplist').append(html);
				            }else{
				            	$('.pullUpLabel').html("已加载完毕");
				            	me.noData();me.lock();
				            } 
			                // 为了测试，延迟1秒加载
			                me.noData();
			                me.resetload();
			                
			            },
			            error: function(xhr, type){
			                alert('Ajax error!');
			                // 即使加载出错，也得重置
			                me.resetload();
			            }
			        });
			    }
			});	
		}
		function Load() {

			setTimeout(function () {	
					$.ajax({
					type: 'GET',
					url: '{$staticHost}/groupWeb/statist',
					dataType: 'json',
					data:{aid:aid,gid:gid,id:id},
		            success: function(data){
		            	console.log(data)
		               var result = '';
						counter++;
						pageEnd = num * counter;
						pageStart = pageEnd - num;

						if(typeof data.members == 'undefined') {
							$(".pullUpLabel").html("已加载完毕");
							return;
						}
						console.log(data)
						if(data.members.length>0) {
							// id += data.members.length-1;
							id = data.members[data.members.length-1].uid;
							
							var html = template('curUserList', data);
							$('#waplist').append(html);
			            }else{
			            	$('.pullUpLabel').append("没有更多数据");
			            } 
					},
		           
		        });
				myScroll.refresh();
			}, 1000);
		}
		// 刷新加载

	</script>
	<script src="{$staticHost}/static/js/dropload.js"></script>
{template 'show/web-footer'}
